"use client";
import { RainbowButton } from "@/components/button/RainbowButton";
import { MagicText } from "@/components/text/MagicText";
import { MoonCardType } from "@/types/book";
import * as Dialog from "@radix-ui/react-dialog";
import { useRouter } from "next/navigation";
import { useState } from "react";
import { MdClose } from "react-icons/md";

type ReviewMoonCardProps = {
  item: MoonCardType;
}
export const ReviewMoonCard = ({item}: ReviewMoonCardProps) => {

  const route = useRouter();

  const { id, name, energy, englishName, time, extraMeaning, teaching, description } = item;

  const [open, setOpen] = useState(0);
  return (
    
    <Dialog.Root open={!!open}>
      <Dialog.Trigger asChild>
      <RainbowButton size='sm' buttonType='success' className='ml-[10px]' onClick={() => setOpen(1)}>查看</RainbowButton>
      </Dialog.Trigger>
      <Dialog.Portal>
        <Dialog.Overlay className="fixed inset-0 bg-blackA6 data-[state=open]:animate-overlayShow" />
        <Dialog.Content className="fixed left-1/2 top-1/2 max-h-[85vh] w-[90vw] max-w-[650px] -translate-x-1/2 -translate-y-1/2 rounded-md bg-white p-[25px] shadow-[hsl(206_22%_7%_/_35%)_0px_10px_38px_-10px,_hsl(206_22%_7%_/_20%)_0px_10px_20px_-15px] focus:outline-none data-[state=open]:animate-contentShow">
          <Dialog.Title >
            <MagicText className="m-0 text-[20px] font-medium text-mauve12" text="月相神谕卡" />
          </Dialog.Title>
          <fieldset className="mb-[15px] flex items-center gap-5 mt-[36px]">
            <label
              className="w-[150px] text-right text-[15px]"
              htmlFor="original"
            >
              名称：
            </label>
            <input
              className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
              id="original"
              value={name}
              readOnly
            />
          </fieldset>
          <fieldset className="mb-[15px] flex items-center gap-5">
            <label
              className="w-[150px] text-right text-[15px]"
              htmlFor="rewrite"
            >
              英文名：
            </label>
            <input
              className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
              id="rewrite"
              value={englishName}
              readOnly
            />
          </fieldset>
          <fieldset className="mb-[15px] flex items-center gap-5">
            <label
              className="w-[150px] text-right text-[15px]"
              htmlFor="rewrite"
            >
              时刻：
            </label>
            <input
              className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
              id="rewrite"
              value={time}
              readOnly
            />
          </fieldset>
          <fieldset className="mb-[15px] flex items-center gap-5">
            <label
              className="w-[150px] text-right text-[15px]"
              htmlFor="rewrite"
            >
              描述：
            </label>
            <textarea
              className="inline-flex leading-[25px] h-[70px] w-full flex-1 items-center justify-center rounded p-2.5 text-[15px] shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
              id="rewrite"
              value={description}
              readOnly
            />
          </fieldset>
          <fieldset className="mb-[15px] flex items-center gap-5">
            <label
              className="w-[150px] text-right text-[15px]"
              htmlFor="rewrite"
            >
              接通月亮的能量：
            </label>
            <input
              className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
              id="rewrite"
              value={energy}
              readOnly
            />
          </fieldset>
          <fieldset className="mb-[15px] flex items-center gap-5">
            <label
              className="w-[150px] text-right text-[15px]"
              htmlFor="rewrite"
            >
              这张牌的额外涵义：
            </label>
            <input
              className="inline-flex h-[35px] w-full flex-1 items-center justify-center rounded px-2.5 text-[15px] leading-none shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
              id="rewrite"
              value={extraMeaning}
              readOnly
            />
          </fieldset>
          <fieldset className="mb-[15px] flex items-center gap-5">
            <label
              className="w-[150px] text-right text-[15px]"
              htmlFor="rewrite"
            >
              教学：
            </label>
            <textarea
              className="inline-flex leading-[25px] h-[70px] w-full flex-1 items-center justify-center rounded p-2.5 text-[15px] shadow-[0_0_0_1px] shadow-violet7 outline-none focus:shadow-[0_0_0_2px] focus:shadow-violet8"
              id="rewrite"
              value={teaching}
              readOnly
            />
          </fieldset>
          <Dialog.Close asChild>
            <button
              className="absolute right-2.5 top-2.5 inline-flex size-[25px] appearance-none items-center justify-center rounded-full hover:bg-violet4 focus:shadow-[0_0_0_2px] focus:shadow-violet7 focus:outline-none"
              aria-label="Close"
              onClick={() => setOpen(0)}
            >
              <MdClose />
            </button>
          </Dialog.Close>
        </Dialog.Content>
      </Dialog.Portal>
    </Dialog.Root>
  );
}